
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="scy">
<title>首页</title>
<script src="/webjars/jquery/3.5.1/jquery.js"></script>
<script src="/aa.js"></script>
<script type="text/javascript"                    src="/resources/dialog/dialog.js"></script>
<script type="text/javascript"                    src="/resources/dialog/tinybox2/tinybox.js"></script>
<link   type="text/css"        rel="stylesheet"  href="/resources/dialog/tinybox2/style.css" />
<link rel="stylesheet" href="/resources/css/bootstrap.min.css" />
<link rel="stylesheet" href="/resources/css/dashboard.css" />
</head>
<body>
<div >
 <div class="modal-header">
        <h5 class="modal-title" >查询项</h5>
</div>

<form id="queryForm" name="queryForm" action="">
<div class="container">
  <div class="row">
    <div class="col">
      <span id="aazone.zoneProvince">
</span>
    </div>
    <div class="col">
      <span id="aazone.zoneCity">
</span>
    </div>
    <div class="col">
     <span id="aazone.zoneCounty">
</span>
    </div>
  </div>
</div>
</form>
<div class="modal-header">
        <h5 class="modal-title" >数据列表</h5>
</div>
<span id="aazone.zoneList">
</span>
<span id="aazone.zonePage">
</span>

</br>
<div class="modal-header">
        <h5 class="modal-title" >查看详情</h5>
</div>
<span id="aazone.zoneDetail">
</span>

<button type="button"  class="btn btn-primary" onclick = "openDialog();">添加</button>



<script type="text/javascript">


// https://www.jianshu.com/p/61b4860611b2 Component中使用slot的
//https://blog.csdn.net/u014752296/article/details/120522476   使用webcomponent增强/扩展原生元素
const template = document.createElement('template');
template.innerHTML = `<span id="aazone.zoneX">
<slot>slot default</slot>
<!-- @end of zone [zoneX]@ --></span>`;
class AaZone extends HTMLElement {
  constructor() {
    super();
    this._shadowRoot = this.attachShadow({ mode: open });
    this._shadowRoot.appendChild(template.content.cloneNode(true));
  }
}
window.customElements.define('aa-zone', AaZone);

//省
let ajaxProvince = ajaxObj();
//市
let ajaxcity = ajaxObj();
//县
let ajaxcounty = ajaxObj();
//列表
let ajaxList = ajaxObj();
//详情
let ajaxDetail = ajaxObj();


//公共绑定方法
function ajaxObj(){
	let ajaxObj = new AjaxAnywhere();
	ajaxObj.bindById();
	return ajaxObj;
}

function asynSubmitAjax(ajaxObj,formName,url,zone){
	return new Promise((resolve,reject)=>{
		ajaxObj.formName=formName;
		document.getElementById(formName).action = url;
		ajaxObj.getZonesToReload = function(){
				return zone;
		}
		ajaxObj.submitAJAX();
		
		ajaxObj.onAfterResponseProcessing=function(){
			resolve();
		}
	});
}

function detail1(){
	asynSubmitAjax(ajaxDetail,"queryFormAll","/refresh/f/detail","zoneDetail");
}

//刷新市区域
function proviceChange(){
	asynSubmitAjax(ajaxcity,"queryForm","/refresh/t/listcity",'zoneCity');
}

//刷新县区域
function cityChange(){
	asynSubmitAjax(ajaxcounty,"queryForm","/refresh/f/listcounty",'zoneCounty');
}

//刷新列表区域
function countyChange(){
	asynSubmitAjax(ajaxList,"queryForm","/refresh/t/list?pageSize=2&pageNo=1",'zoneList');
}

//分页
function listPage(pageNo){
	if(!pageNo){
		pageNo = 1;
	}
	let url = "/refresh/t/list?pageSize=2&pageNo="+pageNo;
	asynSubmitAjax(ajaxList,"queryForm",url,'zoneList');
}

//增加弹出框
function openDialog(){
	dialog.show({   
		url : '/refresh/j/goadd?callBack=comfirmRefDemo',
		title : '测试窗口',
		width : 800,
		height : 550,
		scrolling : 'no'
	}, false);
 }
 
function dialogCancel(){
	dialog.hide();
}

function comfirmRefDemo(){
	//刷新list
	listPage();
	dialogCancel()
}

async function init(){
	//省刷新
	await asynSubmitAjax(ajaxProvince,"queryForm","/refresh/j/listprovince",'zoneProvince');
	//市刷新
	await asynSubmitAjax(ajaxcity,"queryForm","/refresh/t/listcity",'zoneCity');
	//县刷新
	await asynSubmitAjax(ajaxcounty,"queryForm","/refresh/f/listcounty",'zoneCounty');
	//列表涮洗
	await asynSubmitAjax(ajaxList,"queryForm","/refresh/t/list?pageSize=2&pageNo=1",'zoneList');
	//详情刷新
	await asynSubmitAjax(ajaxDetail,"queryFormAll","/refresh/f/detailrefresh",'zoneDetail');
}

//初始化省份
$(function(){
// 	ajaxProvince.getAJAX('/refresh/j/listprovince', 'zoneProvince');
	init();
});

</script>	
	
	
	
</body>
</html>
